import { ExclamationCircleFilled } from '@ant-design/icons'
import { App } from 'antd'
import cs from 'classnames'
import React, { useContext, useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'

import { Violation } from '@/api/interface'
import complaint from '@/assets/complaint.png'
import complaintActive from '@/assets/complaint_active.png'
import confirmIcon from '@/assets/confirm.png'
import confirmActive from '@/assets/confirm_active.png'
import personal from '@/assets/personal.png'
import setupBg from '@/assets/setup.png'
import setupBgActive from '@/assets/setup_active.png'
import setupBgFirstActive from '@/assets/setup_first_active.png'
import setupBgLast from '@/assets/setup_last.png'
import setupBgLastActive from '@/assets/setup_last_active.png'
import { GlobalContext } from '@/context'
import useLocale from '@/utils/useLocale'

import InvestigationClosure from './components/InvestigationClosure'
import InvestigationDetails from './components/InvestigationDetails'
import PersonalDetails from './components/PersonalDetails'
import locale from './locale'
import styles from './styles/index.module.less'

function Home() {
  const t = useLocale(locale)
  const { modal } = App.useApp()

  const { lang, rtl } = useContext(GlobalContext)

  const router = useHistory()

  const [violation, setViolation] = useState<Partial<Violation>>({
    // refNumber: 200,
    // investigationDateValue: '',
    // location: '354345345',
    // caseSummary: '21345345',
    // writer: 45,
    // investigator: 45,
    details: [
      {
        address: '',
        eid: '784-',
        job: '',
        mobile: '',
        name: '',
        nationality: null,
        role: null,
        email: '',
        hiringDateValue: '',
      },
      // {
      //   address: '四川省成都市双流区',
      //   eid: '654321465432123',
      //   job: '2222',
      //   mobile: '18228597869',
      //   name: 'liu',
      //   nationality: 'AS',
      //   role: 'VIOLATOR',
      //   attachment: [],
      // },
      // {
      //   address: '上海浦东新区',
      //   eid: '654321465432124',
      //   job: '3333',
      //   mobile: '18228597866',
      //   name: 'tao',
      //   nationality: 'AS',
      //   role: 'VIOLATOR',
      //   attachment: [],
      // },
    ],
  })

  const [setup, setSetup] = useState(1)

  useEffect(() => {
    window.scrollTo({ top: 0 })
  }, [setup])

  const setupList = [
    { icon: personal, icon_active: personal, title: t['form.setup.personalDetails'] },
    { icon: complaint, icon_active: complaintActive, title: t['form.setup.investigationDetails'] },
    { icon: confirmIcon, icon_active: confirmActive, title: t['form.setup.investigationClosure'] },
  ]

  const cancel = async () => {
    modal.confirm({
      title: t['form.confirm.title'],
      icon: <ExclamationCircleFilled style={{ color: '#FF7D00' }} />,
      className: cs(styles['custom-modal'], lang === 'en-US' ? '' : styles['custom-modal-rtl']),
      closable: true,
      content: t['form.confirm.content'],
      okText: t['form.button.yes'],
      okButtonProps: { danger: true },
      cancelText: t['form.button.no'],
      keyboard: false,
      onOk() {
        router.push('/')
      },
    })
  }

  const [investigator, setInvestigator] = useState({ one: '', two: '', three: '' })

  const FormComponents: { [key: number]: JSX.Element } = {
    1: (
      <PersonalDetails
        t={t}
        lang={lang}
        cancel={cancel}
        setSetup={setSetup}
        violation={violation}
        setViolation={setViolation}
        investigator={investigator}
        setInvestigator={setInvestigator}
      />
    ),
    2: (
      <InvestigationDetails
        t={t}
        lang={lang}
        cancel={cancel}
        setSetup={setSetup}
        violation={violation}
        setViolation={setViolation}
      />
    ),
    3: (
      <InvestigationClosure
        t={t}
        lang={lang}
        cancel={cancel}
        setSetup={setSetup}
        violation={violation}
        setViolation={setViolation}
      />
    ),
  }

  return (
    <section
      className={cs(
        styles['form'],
        lang === 'en-US' ? '' : styles['form-rtl'],
        rtl ? 'rtl' : 'ltr'
      )}
    >
      <main className={styles['form-main']}>
        {setup < 5 && (
          <div className={styles['form-setup']}>
            {setupList.map((item, index) => {
              const isComplete = index < setup
              const isActive = index === setup - 1
              const isFirst = index === 0
              const isLast = index === setupList.length - 1

              let setupBackground
              if (!isActive) setupBackground = isLast ? setupBgLast : setupBg
              else
                setupBackground = isLast
                  ? setupBgLastActive
                  : isFirst
                  ? setupBgFirstActive
                  : setupBgActive

              return (
                <React.Fragment key={item.title}>
                  <div className={styles['setup-item']}>
                    <img src={setupBackground} className={styles['setup-bg']} alt="bg" />
                    <img
                      src={isComplete ? item.icon_active : item.icon}
                      className={styles['setup-icon']}
                      alt="icon"
                    />
                    <span
                      className={`${styles['setup-title']} ${
                        isComplete ? styles['setup-title-complete'] : ''
                      }`}
                    >
                      {item.title}
                    </span>
                  </div>
                </React.Fragment>
              )
            })}
          </div>
        )}
        <div className={styles['form-content']} key={setup}>
          {FormComponents[setup]}
        </div>
      </main>
    </section>
  )
}

export default Home
